<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="validator.js"></script>
</head>
<body>
<form name="example_form" action="#" method="POST" class="form-horizontal">

  <div class="form-group">
    <label for="req">必填字段:</label>
    <input type="text" name="req" id="req" class="form-control" placeholder="必填" onblur="blurValidate()">
  </div>

  <div class="form-group">
    <label for="alphanumeric">文字字数:</label>
    <input type="text" name="alphanumeric" id="alphanumeric" class="form-control" placeholder="字数大于5，小于15">
  </div>

  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" name="email" id="email" class="form-control" placeholder="验证是否为Email">
  </div>

  <div class="form-group">
    <label for="password">密码:</label>
    <input type="password" name="password" id="password" class="form-control" placeholder="输入密码">
  </div>

  <div class="form-group">
    <label for="repassword">确认密码:</label>
    <input type="repassword" name="repassword" id="repassword" class="form-control" placeholder="输入密码">
  </div>

  <div class="form-group">
    <label for="minlength">字符长度判断:</label>
    <input type="text" name="minlength" id="minlength" class="form-control" placeholder="至少输入8个字符">
  </div>

  <div class="cleanfix"></div>

  <div class="checkbox">
    <label for="tos_checkbox">
      <input name="tos_checkbox" id="tos_checkbox" type="checkbox"> 复选框必填(用于服务条款)
    </label>
  </div>

  <div class="error_msg" id="error_msg" >错误提示的地方</div>

  <button class="btn-default" type="submit" name="submit">提交按钮</button>
  </form>

<script type="text/javascript">
var validator = new Validator('example_form',[
  {   
      name:"req",
      display:"必填字段不能为空",
      rules: 'required'
  },{
      name:"alphanumeric",
      display:"字数小于5个字符|大于15个字符",
      rules: 'min_length(5)|max_length(15)'
  },{
      name:"email",
      display:"请输入您的{{email}}|这不是一个邮箱",
      rules: 'required|is_email'
  },{
      name:"minlength",
      display:"不能为空|至少输入8个字符，您输入的{{minlength}}长度少于8",
      rules: 'required|min_length(8)'
  },{
      name:"tos_checkbox",
      display:"复选框不能为空",
      rules: 'required'
  },{
      name:"password",
      display:"1必填",
      rules: 'required'
  },{
      name:"repassword",
      display:"密码不一致",
      rules: 'same(password)'
  }
],function(obj,evt){
  if(obj.errors.length>0){
      var error_str = '';
      for (var i = 0; i < obj.errors.length; i++) {
          error_str =obj.errors[i].message;
          alert(error_str);return false;
      }

  }
  
})

function blurValidate(){
  validator.validate();
}
</script>
</body>
</html>